<!--
*@Author: QWP
*@Description: 天气卡片
*@Date: 2024-07-23 13:33:51
-->
<template>
  <u-card :style="{ backgroundImage: `url(${ urlFile('warningIndex/weather.png') })` }"
    style="background-size: 100% 100%; background-color: transparent">
    <a-row  style="padding: 8px; font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;">
      <EnvironmentOutlined style="margin-right: 6px;"/>
      <a-space size="middle">
        <span>四川省</span>
        <span>成都市</span>
        <span>高新区</span>
      </a-space>
    </a-row>
    <a-row>
      <CloudOutlined style="font-size: 80px; color: #fff"/>
      <a-col flex="1">
        <a-space direction="vertical" 
          size="small"
          class="f-w-100"
          style="padding: 0 18px;font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;">
          <a-row style="font-size: 20px;">多云</a-row>
          <a-row style="font-size: 26px;">27℃</a-row>
          <a-row justify="space-between"
            style="font-size: 16px;">
            <a-space><FlagOutlined />南风 3-4级</a-space>
            <a-space><FlagOutlined />湿度 56%</a-space>
            <a-space><FlagOutlined />气压 943hPa</a-space>
          </a-row>
        </a-space>
      </a-col>
    </a-row>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'

</script>

<style lang='scss' scoped>
</style>